<template>
    <p>v-modle</p>
    <el-input v-model="input" placeholder="Please input" />
    <h1>{{ input }}</h1>
    <el-radio-group v-model="radio1" class="ml-4">
      <el-radio label="1" size="large">Option 1</el-radio>
      <el-radio label="2" size="large">Option 2</el-radio>
    </el-radio-group>
    <h1>{{ radio1 }}</h1>
    <el-checkbox v-model="checkedbox1" label="Option 1" size="large" />
    <el-checkbox v-model="checkedbox2" label="Option 2" size="large" />
    <p>checkedbox1 {{ checkedbox1 }}</p>
    <p>checkedbox2 {{ checkedbox2 }}</p>

    <el-checkbox v-model="checked1"  disabled>Disabled</el-checkbox>
    <el-checkbox v-model="checked2" disabled>Not disabled</el-checkbox>
    <h1>checked1 {{ checked1 }}</h1>
    <h1>checked2 {{ checked2 }}</h1>
  </template>
  

  <script  setup>
    import { ref } from 'vue'
    const input = ref('')
    const radio1 = ref('1')
    const checkedbox1 = ref(true)
    const checkedbox2 = ref(false)
    const checked1 = ref(true)
    const checked2 = ref(false)
  </script>
  